import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react'
import { Toast, Popup, Input, Button, Dialog } from 'antd-mobile'
import ApiIndex from '@/api/equipment.js';
import { add_check_cache, decrement_check_cache,change_spot_params } from '@/Store/action';
import { connect } from 'react-redux';

const Search = ({ getUserList }) => {
    const [name, setName] = useState('')
    const pressSearchName = () => {
        getUserList(name)
    }
    return (
        <div style={{ margin: 10, display: "flex", flexDirection: "row" }}>
            <Input
                style={{ height: 38, borderWidth: 1, borderColor: "#ccc", borderStyle: "solid", paddingLeft: 14, borderRadius: 7 }}
                placeholder='请输入用户查询'
                value={name}
                onChange={val => {
                    setName(val)
                }}
                onEnterPress={pressSearchName}
            />
            <Button size="large" color="#40AFE6" style={{
                '--background-color': "#40AFE6",
                width: 80
            }} onClick={pressSearchName}>查询</Button>
        </div>
    )

}

const List = ({ name, personnelPosition, sureUser }) => {
    return (
        <div style={{
            borderBottom: "1px solid #eaeaea",
            padding: 7,
            display: "flex",
            flexDirection: "column",
            marginBottom: 7,
            position: "relative"
        }}
            onClick={sureUser}
        >
            <div>
                <span style={{
                    width: 40
                }}>姓名：</span>
                <span>{name}</span>
            </div>
            <div>
                <span style={{
                    width: 40
                }}>岗位：</span>
                <span>{personnelPosition}</span>
            </div>
            <span style={{
                color: "#40AFE6",
                position: "absolute",
                right: 15,
                top: 15
            }}>选择</span>
        </div>
    )
}


const Index = ( props, ref) => {
    const {site,history,isRepair,pId,refInstance,loadPage} = props
    const [visible, setVisible] = useState(false)
    const [listUser, setListUser] = useState([])

    useEffect(() => {
        // 人员列表
        getUserList()
    }, [])

    const getUserList = (name) => {
        try {
            ApiIndex.getPersonnel({
                type:  isRepair ? '维修' : "报修",
                name: name || '',
                workshopNo: site,
            }).then(res => {
                setListUser(res.data.data)
            })
        } catch (error) {
            console.log(error)
        }
    }

    useImperativeHandle(refInstance, () => ({
        show
    }));

    const show = () => {
        setVisible(true)
    }

    const sureUser = (el) => {
        Dialog.confirm({
            content: '确定转派',
            onConfirm: async () => {
                try {
                    let res = await ApiIndex.setTransfe({
                        id: pId?.current || el.id,
                        loginUser: el.gid,
                        loginUserName: el.name,
                        // workshopNo: site,

                    })
                    if (res.data.code == 0) {
                        Toast.show({
                            icon: 'success',
                            content: res.data.msg,
                            position: 'bottom',
                        })
                        loadPage()
                        setVisible(false)
                        // history.push("/equipment")
                    }

                } catch (error) {
                    console.log(error)
                }
            },
        })
    }
    return (
        <Popup
            visible={visible}
            onMaskClick={() => {
                setVisible(false)
            }}
            onClose={() => {
                setVisible(false)
            }}
            bodyStyle={{ height: '50vh' }}
        >
            <div style={{ height: '50vh', display: "flex", flexDirection: "column" }}>
                <div style={{ padding: 7, display: 'flex', flexDirection: "row", justifyContent: "space-between", backgroundColor: "#40AFE6" }}>
                    <span style={{ color: "#fff", fontSize: 14 }} onClick={() => setVisible(false)}>取消</span>
                </div>
                <Search getUserList={(name) => { getUserList(name) }}></Search>
                <div style={{
                    padding: 7,
                    flex: 1,
                    overflowY: "scroll"
                }}>
                    {
                        listUser?.length ? listUser.map(el => <List sureUser={() => sureUser(el)} name={el.name} personnelPosition={el.personnelPosition} key={el.id}></List>)
                        : <div style={{ textAlign:'center',color:"#ccc"}}>暂无数据</div>
                    }

                </div>
            </div>
        </Popup>
    )
}

const mapStateToProps = (state) => {
  return {
      username: state.username,
      site: state.site
  };
};


let Component = connect(mapStateToProps, null)(Index)
export default forwardRef( (props,ref) => <Component  {...props}  refInstance={ref} />)
